/**
 * Created by fangshufeng on 2018/2/27.
 */

import React from 'react'

import {
    Layout, Row, Col, Button
} from 'antd';

const {Header} = Layout;

export  default  class HeaderView extends React.Component {
    // fontFamily: 'cursive', fontWeight: 'bold'
    render() {
        return <Header className="header" style={{backgroundColor: 'white', height: 100}}>

            <Row type='flex' justify='start' style={{paddingTop: 20}}>
                {/*左边*/}
                <Col span={10}>
                    <Row type='flex' justify="start" align='top'>
                        <img src={require("../img/logo2.png")} alt="logo" width="210" height="60"/>
                        <div style={{paddingLeft: 20 , fontSize: 30}}>
                            接口Mock工具
                        </div>
                    </Row>
                </Col>

                {/*中间*/}
                <Col span={4}>
                    <Row type='flex' justify='center'>
                        {/*<div>我是标题</div>*/}
                    </Row>
                </Col>

                {/*右边*/}
                <Col span={10} style={{lineHeight: 'initial'}}>
                    <Row type='flex' justify='right'>
                        <Col span={24}>
                            <div style={{textAlign: 'right', color: 'blue'}}>
                                当前环境:{this.props.currentEnv} &nbsp; 关联码:{this.props.relationId}</div>
                        </Col>

                    </Row>

                    <Row type='flex' justify='right'>
                        <Col span={24} style={{textAlign: "right"}}>
                            <Button type="dashed" style={{marginTop: 10}}
                                    onClick={() => this.props.envChange()}>更新代理环境</Button>
                        </Col>
                    </Row>

                </Col>
            </Row>

        </Header>
    }
}